<template>
  <view class="section-three flexc">
    <view class="header">
      <u-tabs
        :current="tabCurrent"
        :scrollable="true"
        :list="tabList"
        keyName="title"
        lineColor="#CB0011"
        :lineWidth="28"
        :lineHeight="2"
        @click="tabClick"
        :itemStyle="{
          height: '88rpx',
          fontSize: '28rpx',
          color: '#9695A3',
        }"
        :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
        :inactiveStyle="{}"></u-tabs>
    </view>
    <template v-if="tabCurrent == 0">
      <view class="flex1 over">
        <view class="mb16" v-for="(item, index) in list" :key="index">
          <view class="tip flex-between">
            <view class="">录入明细{{ index + 1 }}</view>
            <view
              class="del"
              v-if="!item.disabled"
              @click="() => list.splice(index, 1)">
              删除
            </view>
          </view>
          <view class="wrap">
            <view class="box flexc">
              <view class="">序号</view>
              <input
                class="flex1"
                type="text"
                v-model="item.production_workshop_no"
                placeholder="请输入 不输入自动生成" />
            </view>
            <view class="box flexc" @click="showDateBtn(index)">
              <view class="">
                <text class="sc">*</text>
                生产日期
              </view>
              <view class="box-b flex">
                <input
                  class="flex1"
                  type="text"
                  disabled
                  v-model="item.pale_date"
                  placeholder="默认选择当天" />
                <image
                  src="/static/login/pop-arrow.png"
                  mode="aspectFit"></image>
              </view>
            </view>
            <view class="box flexc" @click="showPrick(index)">
              <view class="">
                <text class="sc">*</text>
                产品名称
              </view>
              <view class="flex box-b">
                <input
                  class="flex1"
                  type="text"
                  v-model="item.product_title"
                  disabled
                  placeholder="请选择" />
                <image
                  src="/static/login/pop-arrow.png"
                  mode="aspectFit"></image>
              </view>
            </view>
            <view class="box flexc">
              <view class="">
                <text class="sc">*</text>
                规格
              </view>
              <input
                class="flex1"
                type="text"
                v-model="item.specifications"
                disabled
                placeholder="请选择" />
              <!-- <view class="box-b flex">
              <image src="/static/login/pop-arrow.png" mode="aspectFit"></image>
            </view> -->
            </view>

            <view class="box flexc">
              <view class="">
                <text class="sc">*</text>
                数量(件)
              </view>
              <input
                class="flex1"
                v-model="item.num"
                type="text"
                placeholder="请输入" />
            </view>

            <view class="box flexc">
              <view class="">重量(kg)</view>
              <input
                class="flex1"
                v-model="item.weight"
                type="text"
                placeholder="请输入" />
            </view>
            <view
              class="flex-center add-icon"
              v-if="index == list.length - 1"
              @click="addList">
              <image src="/static/order/add.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <view class="wrap mb16">
          <view class="box flexc">
            <view class="">备注</view>
            <view class="" style="height: 400upx">
              <u--textarea
                v-model="info"
                border="none"
                style="height: 100%"
                height="200"
                maxlength="200"
                placeholder="请输入备注信息"
                count></u--textarea>
            </view>
          </view>
        </view>
        <record_status_userVue :formType="7" />
      </view>
      <view class="footer flex-between">
        <view class="box-icon column-flex-center" @click="submitBtn(0)">
          <image src="/static/order/5.png" mode="aspectFit"></image>
          <view class="">存草稿</view>
        </view>
        <view class="btn" @click="submitBtn(1)">提交</view>
      </view>
    </template>
    <!-- 养殖记录 -->
    <template v-if="tabCurrent == 2">
      <view class="search flex" style="margin-top: 32upx">
        <image src="/static/order/search.png" mode="aspectFit"></image>
        <input
          type="text"
          @confirm="searchBtn"
          v-model="keyword"
          class="flex1"
          placeholder="搜索" />
      </view>
      <view class="flex1 over" style="padding-bottom: 50upx">
        <scroll-view
          scroll-y="true"
          style="height: 100%"
          @scrolltolower="loadingMore">
          <view class="content-wrap">
            <view
              class="content-box"
              v-for="(item, index) in scrollList"
              :key="index"
              @click="goDetail(item)">
              <view class="flex-between">
                <view class="flex">
                  <view :class="['t', item.status == 9 ? 'ac4' : '']">
                    {{ item.title }}
                  </view>
                  <view class="edit-text" v-if="item.pid > 0">修改</view>
                </view>
                <view class="t1">{{ item.created_at }}</view>
              </view>
              <view class="no flex-between">
                <view class="">序号：{{ item.production_workshop_no }}</view>
                <view
                  class="cred"
                  v-if="item.pid > 0"
                  @click.stop="historyBtn(item)">
                  历史数据
                </view>
              </view>
              <view class="t2 mb12">服务日期：{{ item.created_at }}</view>
              <!-- <view class="t2">养殖户：{{ item.farmer_title }}</view> -->
              <view class="flex-between mt34">
                <view class="flex">
                  <image
                    v-if="item.status != 9"
                    class="img"
                    src="/static/order/3.png"
                    mode="aspectFit"></image>
                  <image
                    class="img"
                    src="/static/order/4.png"
                    v-if="item.status == 9"
                    mode="aspectFit"></image>
                  <!-- :class="item.status == 3 ? 'ac1' : 'ac'" -->
                  <text :class="['ac', item.status == 9 ? 'ac4' : '']">
                    {{ item.user_name }}
                  </text>
                </view>
                <!-- status 1通过 2拒绝 -->
                <view
                  :class="
                    item.status == 1 ||
                    item.status == 2 ||
                    item.status == 4 ||
                    item.status == 6
                      ? 'ac2'
                      : item.status == 8
                      ? 'ac3'
                      : 'ac4'
                  ">
                  {{ item.status_name }}
                </view>
              </view>
            </view>
          </view>
          <w_loadmore :status="loadStatus"></w_loadmore>
        </scroll-view>
      </view>
    </template>
    <!-- 查看报表 -->
    <template v-if="tabCurrent == 1">
      <view class="nav1 flex-between">
        <view class="flex">
          <view class=""></view>
          <!-- <image
						src="/static/order/d.png"
						class="d-icon"
						mode="aspectFit"></image> -->
        </view>
        <view class="flex" @click="exportInfo">
          <image
            src="/static/order/e.png"
            mode="aspectFit"
            class="e-icon"></image>
          <view class="nav1-text">导出</view>
        </view>
      </view>
      <view class="time-box">
        <view class="flex" @click="() => (showTime = true)">
          <view class="">选择时间</view>
          <image
            src="/static/order/d.png"
            mode="aspectFit"
            class="d1-icon"></image>
        </view>
        <view class="time-box-text">2024年12月1日-2024年12月30</view>
      </view>
      <view class="flex1 over wrap1" style="padding-bottom: 50upx">
        <view class="">表单提交次数</view>
        <view class="wrap1-num">{{ total }}</view>
        <view class="wrap1-des">统计数据</view>
        <view class="">
          <zb-table
            :show-header="true"
            :columns="column"
            :border="true"
            :cell-style="cellStyle"
            :cell-header-style="cellHeaderStyle"
            :flt="true"
            :data="tableData"></zb-table>
        </view>
        <view class="page-set">
          <uni-pagination
            title="标题文字"
            :current="page"
            @change="pageBtn"
            :total="total"></uni-pagination>
        </view>
      </view>
      <!-- 选择时间的弹框 -->
      <pop_timeVue
        :showTime="showTime"
        :mode="mode"
        @tiemCheck="tiemCheck"
        @confirmDate="confirmDate"
        @closeTime="() => (showTime = false)" />
    </template>

    <!-- 日期 -->
    <u-calendar
      :show="showDate"
      color="#DA4334"
      @close="() => (showDate = false)"
      :maxDate="maxDate"
      :minDate="minDate"
      :default-date="defaultDate"
      :month-num="12"
      @confirm="confirmDate1"></u-calendar>
    <u-picker
      @cancel="() => (show = false)"
      @confirm="confirmPicker"
      :show="show"
      confirmColor="#DA4334"
      :columns="productList"
      keyName="title"></u-picker>
  </view>
</template>

<script>
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const maxDate = new Date(year + 1, 0, 0).getTime();
const minDate = new Date(year, 0, 1).getTime();
const defaultDate = [`${year}-${month}-${date}`];
const monthNum = (year - 2022 + 1) * 12;
import w_loadmoreVue from "../../../components/w_loadmore/w_loadmore.vue";
import pop_timeVue from "../../../components/order/pop_time.vue";
import record_status_userVue from "../../../components/order/record_status_user.vue";
export default {
  components: { record_status_userVue, pop_timeVue, w_loadmoreVue },
  data() {
    return {
      monthNum,
      maxDate,
      minDate,
      defaultDate,
      loadStatus: "loadmore",
      keyword: "",
      show: false,
      showDate: false,
      showIndex: 0,
      info: "",
      tabCurrent: 0,
      tabList: [
        { title: "发起提交", value: 0 },
        { title: "查看报表", value: 1 },
        { title: "查看数据", value: 2 },
      ],
      list: [
        {
          production_workshop_no: "",
          pale_date: "",
          product_id: "",
          product_title: "",
          specifications: "",
          num: "",
          weight: "",
          disabled: true,
        },
      ],
      productList: [],
      scrollList: [],
      timeIndex: null,
      page: "1",
      limit: "10",
      total: 0,
      nomore: false,
      column: [],
      showDate: false, //日历弹框
      tableData: [],
      showTime: false,
      start_time: "",
      end_time: "",
      mode: "range", //single单个---range范围
      isDetail: false,
    };
  },
  created() {
    this.getProduct();
    this.getDetail();
  },
  onShow() {
    if (uni.getStorageSync("productList")) {
      const { product_title, specifications, product_id } = JSON.parse(
        uni.getStorageSync("productList")
      );
      this.list[this.showIndex].product_id = product_id;
      this.list[this.showIndex].product_title = product_title;
      this.list[this.showIndex].specifications = specifications;
      uni.removeStorageSync("productList");
    }
    if (this.isDetail) {
      this.page = 1;
      this.nomore = false;
      this.getList();

      this.isDetail = false;
    }
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return {
          color: "#DA4334",
          fontSize: "24rpx",
        };
      }
      if (Object.keys(row)[6] == "status_text" && columnIndex === 6) {
        if (row.status_text.indexOf("失败") > -1) {
          return {
            color: "#DA4334",
            fontSize: "24rpx",
          };
        }
        if (row.status_text === "已撤销") {
          return {
            color: "#8d8d8d",
            fontSize: "24rpx",
          };
        }
      }
      return {
        color: "#171717",
        fontSize: "24rpx",
      };
    },
    cellHeaderStyle() {
      return {
        backgroundColor: "#F6F1F1",
        color: "#707072",
        fontSize: "24rpx",
      };
    },
    //点击历史数据
    historyBtn(item) {
      this.toRoute({
        path: "section-detail",
        query: {
          id: item.pid,
          type: item.type, //1--放苗 2--养殖
        },
      });
    },
    exportInfo() {
      let obj = {
        type: this.timeIndex == null ? "" : this.timeIndex + 1,
        start_time: this.start_time,
        end_time: this.end_time,
        form_type: 7,
      };
      this.$store.dispatch("exportInfo", obj);
    },
    //点击数据跳转到详情页面
    goDetail(item) {
      if (item.pid > 0) {
        this.toRoute({
          path: "edit-record",
          query: {
            id: item.id,
            type: 7, //1--放苗 2--养殖
            pid: true,
          },
        });
      } else {
        this.toRoute({
          path: "section-detail",
          query: {
            id: item.id,
            type: 7, //1--放苗 2--养殖
          },
        });
      }
      this.isDetail = true;
    },
    getDetail() {
      this.$api({
        url: "/get_production_workshop_detail",
        method: "get",
        data: {
          type: "1",
        },
      }).then((res) => {
        if (res.code === 200 && res.data.detail.length > 0) {
          res.data.detail.forEach((item) => {
            item.disabled = false;
          });
          res.data.detail[0].disabled = true;
          this.list = res.data.detail;
          this.info = res.data.info;
          this.editId = res.data.id;
        }
      });
    },
    loadingMore() {
      if (this.nomore) return;
      this.page++;
      this.getList(true);
    },
    pageBtn(e) {
      this.page = e.current;
      this.getDetailList(true);
    },
    //选择时间段事件
    confirmDate({ e, data, index }) {
      console.log("当前时间段---", e);
      this.start_time = e[0];
      this.end_time = e[e.length - 1];
      this.timeIndex = index;
      this.getDetailList();
    },
    //查看列表的时间弹框选择
    tiemCheck({ k }) {
      this.timeIndex = k;
      this.getDetailList();
    },

    searchBtn() {
      this.page = 1;
      this.nomore = false;
      this.getList();
    },
    tabClick(e) {
      this.tabCurrent = e.value;
      this.timeIndex = null;
      this.nomore = false;
      this.page = 1;
      if (e.value == 2) {
        this.loadStatus = "loadmore";
        this.getList();
      } else if (e.value == 1) {
        this.getDetailList();
      }
    },
    //查看报表
    getDetailList(flg = false) {
      const page = flg ? this.page : (this.page = 1);
      const type = this.timeIndex == null ? "" : this.timeIndex + 1;
      this.$api({
        url: "/get_production_workshop_detail_list",
        method: "get",
        data: {
          page,
          limit: this.limit,
          type,
          start_time: this.start_time,
          end_time: this.end_time,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.total = res.data.total;
          this.tableData = res.data.list;
          this.showTime = false;
          this.column = [
            {
              name: "production_workshop_no",
              label: "序号",
              fixed: true,
              width: 80,
              align: "center",
              emptyString: "--",
            },
            {
              name: "pale_date",
              label: "生产日期",
              sorter: false,
              align: "center",
            },
            {
              name: "product_title",
              label: "产品名称",
              align: "center",
            },
            {
              name: "specifications",
              label: "规格",
              align: "center",
            },
            { name: "num", label: "数量", align: "center" },
            { name: "weight", label: "重量", align: "center" },
            {
              name: "status_text",
              label: "审核状态",
              sorter: false,
              align: "center",
            },
          ];
        }
      });
    },
    //查看数据
    getList(flg = false) {
      const page = flg ? this.page : (this.page = 1);
      this.loadStatus = "loadmore";
      this.$api({
        url: "/get_production_workshop_list",
        method: "get",
        data: {
          page,
          limit: this.limit,
          keyword: this.keyword,
        },
      }).then((res) => {
        if (res.code === 200) {
          if (flg) {
            this.scrollList = this.scrollList.concat(res.data.list);
          } else {
            this.scrollList = res.data.list;
          }
          this.nomore = res.data.total / this.limit > this.page ? false : true;
          this.loadStatus = this.nomore ? "nomore" : "loading";
        }
      });
    },
    checkObjectsHaveValues(list, k) {
      // 遍历list数组中的每个对象
      for (let i = 0; i < list.length; i++) {
        const obj = list[i];

        // 遍历对象中的每个字段
        for (let key in obj) {
          // 跳过production_workshop_no字段
          if (k.includes(key) && !obj[key]) {
            return false;
          }
        }
      }

      // 如果所有字段都有值，返回true
      return true;
    },
    submitBtn(k) {
      this.list.forEach((item) => {
        if (!item.pale_date) {
          item.pale_date = new Date().toLocaleDateString().replace(/\//g, "-");
        }
      });
      const arr = ["pale_date", "product_title", "specifications", "num"];
      const s = this.checkObjectsHaveValues(this.list, arr);
      console.log(this.list, "-------");
      if (!s && k != 0) {
        uni.showToast({
          title: "请填写完整",
          icon: "none",
        });
        return;
      }
      this.$api({
        url: "/save_production_workshop",
        method: "post",
        data: {
          info: this.info,
          details: JSON.stringify(this.list),
          is_draft: k == 0 ? "1" : "0",
          id: this.editId || "",
        },
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        if (res.code === 200 && k != 0) {
          this.list.forEach((item) => {
            Object.keys(item).forEach((v) => (item[v] = ""));
          });
        }
      });
    },
    confirmPicker(e) {
      this.list[this.showIndex].product_id = e.value[0].product_id;
      this.list[this.showIndex].product_title = e.value[0].title;
      this.list[this.showIndex].specifications = e.value[0].specifications;
      this.show = false;
    },
    showPrick(k) {
      // this.show = true;
      this.showIndex = k;
      this.toRoute("/select-product");
    },
    confirmDate1(e) {
      this.list[this.showIndex].pale_date = e[0];
      this.showDate = false;
    },
    showDateBtn(k) {
      this.showIndex = k;
      this.showDate = true;
    },
    addList() {
      this.list.push({
        production_workshop_no: "",
        pale_date: "",
        product_id: "",
        product_title: "",
        specifications: "",
        num: "",
        weight: "",
        disabled: false,
      });
    },
    getProduct() {
      this.$api({
        url: "/product_specifications",
        method: "get",
      }).then((res) => {
        if (res.code === 200) {
          this.productList.push(res.data);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.section-three {
  width: 100%;
  height: 100%;
  background: #f5f7f9;

  ::v-deep .u-tabs__wrapper__nav__item {
    flex: 1;
  }
  ::v-deep .u-popup {
    flex: 0 !important;
  }
  .header {
    height: 88upx;
    width: 100%;
    background: #fff;
  }
  .mb16 {
    margin-bottom: 16upx;
  }
  .tip {
    padding: 20upx 32upx;
    font-size: 24rpx;
    color: #a0a0a0;
  }
  .del {
    font-size: 24rpx;
    color: #da4334;
  }
  .add-icon {
    padding: 22upx 0;
    & > image {
      width: 40upx;
      height: 40upx;
    }
  }
  .wrap {
    background: #fff;
    padding: 0 32upx;

    .box {
      padding: 28upx 0;
      font-size: 32rpx;
      border-bottom: 1rpx solid #e4e4e4;
      & > view {
        font-size: 32rpx;
        color: #161616;
      }
      & > input {
        font-size: 32rpx;
        height: 28upx;
        margin-top: 28upx;
      }

      .box-b {
        margin-top: 28upx;
        & > input {
          height: 28upx;
          font-size: 32rpx;
        }
        & > image {
          width: 12upx;
          height: 21upx;
        }
      }
      ::-webkit-input-placeholder {
        color: #a0a0a0;
      }
    }

    .l-wrap {
      padding: 58upx 8upx 30upx 54upx;
      .l-box {
        position: relative;
        margin-bottom: 38upx;
        &-c {
          position: absolute;
          top: 0;
          left: -32upx;
          width: 16rpx;
          height: 16rpx;
          background: #d7d7d7;
          border-radius: 50%;
        }
        &-line {
          position: absolute;
          top: 28upx;
          left: -25upx;
          width: 2upx;
          height: 100upx;
          background: #d7d7d7;
        }
        &-title {
          font-size: 24rpx;
          color: #a0a0a0;
          & > view:nth-of-type(1) {
            font-size: 32rpx;
            color: #3d3d3d;
            margin-bottom: 12upx;
          }
        }
        &-r {
          &-t {
            font-size: 24rpx;
            color: #a0a0a0;
            & > image {
              width: 68rpx;
              height: 68rpx;
              margin-bottom: 8upx;
            }
          }
          .arrow {
            width: 32upx;
            height: 32upx;
            margin-left: 10upx;
            margin-right: 10upx;
            margin-top: 18upx;
          }
          &-add {
            width: 68rpx;
            height: 68rpx;
            background: #ffffff;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            border: 2rpx solid #ededed;
            & > image {
              width: 36upx;
              height: 36upx;
            }
          }
        }
      }
    }
  }
  .footer {
    background: #fff;
    padding: 8upx 32upx;

    padding-bottom: env(safe-area-inset-bottom);
    .box-icon {
      font-size: 24rpx;
      color: #000000;
      & > image {
        width: 39upx;
        height: 38upx;
        margin-bottom: 10upx;
      }
    }
    .btn {
      width: 580rpx;
      height: 80rpx;
      background: #da4334;
      border-radius: 422rpx 422rpx 422rpx 422rpx;
      border: 1rpx solid #dafbff;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      line-height: 80upx;
    }
  }
  .search {
    width: 702rpx;
    height: 68rpx;
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.06);
    margin: 0 auto 20upx;
    box-sizing: border-box;
    padding: 0 20upx;
    font-size: 28rpx;
    & > image {
      width: 32upx;
      height: 32upx;
      margin-right: 16upx;
    }
  }
  .content-wrap {
    padding: 0 24upx;
    .content-box {
      padding: 32upx 32upx 28upx;
      background: #fff;
      margin-bottom: 20upx;
      font-size: 24rpx;
      color: #8d8d8d;
      .t {
        font-size: 32rpx;
        color: #171717;
      }
      .t1 {
        color: #afafaf;
      }
      .edit-text {
        width: 78rpx;
        height: 36rpx;
        background: #f17303;
        font-size: 24rpx;
        color: #ffffff;
        border-radius: 14upx 0 14upx 0;
        margin-left: 16upx;
        text-align: center;
        line-height: 36upx;
      }
      .no {
        margin-top: 30upx;
        margin-bottom: 12upx;
        color: #8d8d8d;
      }
      .cred {
        font-size: 24rpx;
        color: #da4334;
      }
      .t2 {
        color: #8d8d8d;
      }
      .mb12 {
        margin-bottom: 12upx;
      }
      .ac {
        font-size: 26rpx;
        color: #8d8d8d;
      }
      .ac1 {
        font-size: 26rpx;
        color: #171717;
      }
      .img {
        width: 40upx;
        height: 40upx;
        margin-right: 8upx;
      }
      .ac2 {
        font-size: 26rpx;
        color: #f17303;
      }
      .ac3 {
        font-size: 26rpx;
        color: #0cb18e;
      }
      .ac4 {
        font-size: 26rpx;
        color: #8d8d8d;
      }
      .mt34 {
        margin-top: 34upx;
      }
    }
  }
  .page-set {
    margin: 20upx 0;
  }
  .nav1 {
    height: 88rpx;
    background: #ffffff;
    font-size: 32rpx;
    color: #161616;
    box-sizing: border-box;
    padding: 0 32upx;
    .d-icon {
      width: 20rpx;
      height: 13rpx;
      margin-left: 18upx;
    }
    &-text {
      font-size: 28rpx;
      color: #da4334;
      margin-left: 6upx;
    }
    .e-icon {
      width: 28rpx;
      height: 28rpx;
    }
  }
  .time-box {
    padding: 30upx 32upx 16upx;
    font-size: 28rpx;
    color: #1c2127;
    .d1-icon {
      width: 12upx;
      height: 12upx;
      margin-left: 4upx;
    }
    &-text {
      font-size: 24rpx;
      color: #6f6e74;
      margin-top: 48upx;
    }
  }
  .wrap1 {
    background: #fff;
    padding: 28upx 32upx;
    font-size: 28rpx;
    color: #171717;
    &-num {
      font-size: 48rpx;
      padding: 48upx 0;
      border-bottom: 1rpx solid #e4e4e4;
    }
    &-des {
      font-size: 28rpx;
      color: #161616;
      margin: 28upx 0 24upx;
    }
  }
  .popup-wrap {
    padding: 34upx 32upx 0;
    width: 100%;
    box-sizing: border-box;
    .pop-header {
      position: relative;
      font-weight: bold;
      text-align: center;
      font-size: 28rpx;
      color: #181818;
      margin-bottom: 50upx;
      & > image {
        position: absolute;
        width: 32upx;
        height: 32upx;
        left: 30upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .popup-box {
      flex-wrap: wrap;
      margin-bottom: 200upx;
      & > view {
        width: 320rpx;
        height: 76rpx;
        background: #ffffff;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #eaeaea;
        text-align: center;
        line-height: 76upx;
        font-size: 26rpx;
        color: #171717;
        margin-bottom: 20upx;
      }
      .time-ac {
        border: 2rpx solid #da4334;
        color: #da4334;
      }
    }
  }
  .sc {
    color: #da4334;
  }
}
</style>
